<template>
  <el-dropdown class="dropdown" trigger="hover" @visible-change="onVisibleChange">
    <div class="dropdown-toggle d-flex jc-between al-center bgc-white">
      <div>主题{{ `${['', '一', '二', '三', '四'][radio]}` }}</div>
      <i class="el-icon-arrow-down" :class="dropdownIn ? 'dropdown-in' : 't-light'"></i>
    </div>
    <el-dropdown-menu slot="dropdown" class="dropdown-menu">
      <div class="title pb-16">表格样式</div>
      <div class="theme-box d-flex flex-wrap jc-between al-between">
        <div
          v-for="(index, i) in 4"
          :key="index"
          class="theme-item d-flex flex-column al-center"
          @click="handleChange(index)"
        >
          <img class="cover mb-16" :src="formatThemeCover(index)" />
          <el-radio v-model="radio" :label="index" @change="handleChange"
            >主题{{ `${['一', '二', '三', '四'][i]}` }}</el-radio
          >
        </div>
      </div>
    </el-dropdown-menu>
  </el-dropdown>
</template>

<script>
  export default {
    model: { prop: 'theme' },
    props: { theme: { type: Number, default: undefined } },
    data() {
      return {
        dropdownIn: false,
        radio: 1
      };
    },
    created() {
      this.radio = this.theme;
    },
    methods: {
      // 下拉多选
      onVisibleChange(visible) {
        this.dropdownIn = visible;
      },
      formatThemeCover(index) {
        return require(`@/assets/images/marketing/productEdit/editor/cover-excel-theme${index}.png`);
      },
      handleChange(val) {
        this.radio = val;
        this.$emit('input', val);
      }
    }
  };
</script>

<style lang="scss" scoped>
  .dropdown-toggle {
    border: 1px solid #cecece;
    border-radius: 4px;
    padding: 0 16px;
    width: 360px;
    line-height: 32px;
    cursor: pointer;

    .el-icon-arrow-down {
      border-radius: 50%;
      padding: 2px;
      transition: all 0.3s;

      &.dropdown-in {
        transform: rotate(180deg);
      }
    }
  }

  .dropdown-menu {
    margin: 5px 0;
    padding: 16px 16px 24px;
    width: 360px;

    .title {
      border-bottom: 1px solid map-get($bdColors, 'grey');
    }

    .theme-box {
      align-content: space-between;
      padding: 16px 16px 0;
      height: 234px;
      cursor: pointer;

      .theme-item {
        .cover {
          width: 129px;
          height: 67px;
          background-color: pink;
        }
      }
    }
  }
</style>
